<template>
    <!-- 中间分类信息 -->
    <el-card shadow="never" style="margin-top:10px;">
         <div class="categoryContainer" :class="cate==true?'fold':''">
            <el-row class="category" :gutter="20"  v-for="(Catetitle,index) in categoryS.Categorylsit" :key="index">
                <el-col class="categoryTitle" :span="2">{{Catetitle.label}}:</el-col>
                <el-col class="categoryList" :span="22" >
                    <div class="select-item" @click="handlerCateItem(Catetitle.name,item.id)" v-for="(item,index) in Catetitle.choises" :key="item.id">{{item.name}}</div>
                </el-col>
            </el-row>
            <!-- 日历 -->
            <!-- <el-row class="category" :gutter="20">
                <el-col class="categoryTitle" :span="2">兴趣爱好:</el-col>
                <el-col class="categoryList" :span="22">
                 
           <el-date-picker v-model="timer"  type="daterange" range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期" size="small" />
                </el-col>
            </el-row> -->
        </div>         
         <p class="shensuo" @click="handleCateFlex">
            <span>{{cate==true?'展开全部':'收起'}}</span>
         </p>
  </el-card>
 
</template>

<script setup lang="ts">

import { ref,onMounted } from "vue"
import { ElMessage } from 'element-plus'
import categoryL from "../../../../store/course/course"
let categoryS = categoryL()

onMounted(() => {
  // 挂载的时候请求分类数据
  categoryS.getCategoryList() 
  
})
// 存储选择的内容参数
let filterInfo = ref([])
let params = ref({
    filterCode:'',
    filterValue:[]
   },
)
// 定义标志位，对分类信息进行展开和收起
let cate = ref(true)
// 收集时间数据
let timer = ref([])
// 控制展开和收起的回调
const handleCateFlex = ()=>{
    cate.value = !cate.value
}

// 点击分类的内容 ClassName  ClasItem [id]
const handlerCateItem = (ClassName,ClasItem)=>{
    /* 
      ClassName--点击的大类别名
      ClasItem---点击的具体内容
    */
   let filterCode = params.value.filterCode
   let filterValue = params.value.filterValue
 
    // 上来直接去判断大数组中有没有类别名字
   const item =  filterInfo.value.find(item=> item.filterCode==ClassName);
// 没有就将数据加进去
    if(!item){
       
        let arr = [];
        arr.push(ClasItem);
        filterInfo.value.push({filterCode:ClassName,filterValue:arr})
        console.log(filterInfo.value)
        // return;
    }
//   有就判断一下里里面点击同类别的数组长度是否大于3个
   if(item?.filterValue?.length >= 3){
    
    let repeat =  item.filterValue.find(item => item === ClasItem);
   if(repeat){
    // 查找索引重复元素索引--删除元素
    let index = item.filterValue.indexOf(repeat)
       item.filterValue.splice(index,1)
       console.log(filterInfo.value);
       return
   }
     ElMessage.warning('同种类别只能选择三个选项')
        return;
   }
//如果小于三个，判断已经有的是否重复-重复就删除掉，
// filter取反，返回不重复的，将不重复的从新压入
   let repeat =  item.filterValue.find(item => item === ClasItem);
   if(repeat){
    // 查找索引重复元素索引--删除元素
    // 如果小于三
    let index = item.filterValue.indexOf(repeat)
       item.filterValue.splice(index,1)
       console.log(filterInfo.value);
       return
   }
//不重复就继续加进去--点击的内容
   item.filterValue.push(ClasItem);
   console.log(filterInfo.value)
   

   
}
</script>

<style scoped>
/* 日期框选中颜色 */
/deep/.is-active{
    --el-input-focus-border-color: #f93684;
}

/* 分类样式 */
.categoryContainer{
   overflow: hidden;
}
/* 展开和收起 */
.fold{
  height: 133px;
}
 .shensuo{
    text-align: center;
    color: #f93684;
    font-size: 14px;
    margin: 20px 0 0;
}
.category {
    display: flex;
    align-items: center;
}

.categoryTitle {
    color: #b1b5c1;
    padding: 7px 0;
    font-size: 14px;
    box-sizing: border-box;
}

.categoryList {
    /* border:none; */
    /* display: flex; */
}

.select-item {
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    color: #7d8090;
    margin-right: 24px;
    margin-bottom: 10px;
    margin-top: 8px;
    padding: 7px 13px;
    border-radius: 4px;
}

.active-cate {
    background: #f93684;
    color: #fff;
}

</style>